<template>
  <!-- 基础信息配置 -->
  <div class="basicInfo">
    <!-- 位置信息 -->
    <div class="info">
      <div class="nameList">
        <div class="name">位置信息</div>
        <div class="list" v-if="!disabledType">
          <el-button type="primary" round @click="submit">保存</el-button>
        </div>
      </div>
      <div class="items">
        <div class="title">位置编码</div>
        <div class="cont"><span style="margin-right:5px;">{{siteCode}}</span></div>
      </div>
      <div class="items">
        <div class="title"><span class="mark">*</span>位置名称</div>
        <div class="cont">
          <el-input v-model="basicInfo.categoryName" maxlength="32" placeholder="请输入位置名称"
            clearable :disabled="disabledType">
          </el-input>
        </div>
      </div>
    </div>

    <!-- 链接配置 -->
    <div class="info" style="padding-bottom:10px;border-bottom: 1px dashed #cdcdcd;">
      <div class="nameList">
        <div class="name">配置链接</div>
      </div>
      <div class="items" v-for="(item,index) in hrefUrlList" :key="index">
        <div class="title" style="width:40px;">{{item.name}}</div>
        <div class="cont" style="width: calc(100% - 50px);">
          <el-input v-model="item.url" placeholder="请输入地址"
            clearable :disabled="disabledType" @focus="focusHrefUrl(item)">
            <template slot="prepend">{{item.pre}}</template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 影片配置 -->
    <div class="video" style="padding-bottom:20px;border-bottom: 1px dashed #cdcdcd;">
      <div class="nameList">
        <div class="name">已配置影片</div>
        <div class="list" v-if="!disabledType">
          <el-button type="text" @click="updatePosition('top')" :disabled="disabled">置顶</el-button>
          <el-button type="text" @click="updatePosition('moveUp')" :disabled="disabled">上移</el-button>
          <el-button type="text" @click="updatePosition('moveDown')" :disabled="disabled">下移</el-button>
          <el-button type="text" @click="updatePosition('bottom')" :disabled="disabled">置底</el-button>
          <el-button type="text" style="color:red;" :disabled="JSON.stringify(this.select)=='{}'?true:false" @click="deleteDataVideo">删除</el-button>
          <el-button type="text" @click="addVideo">新增影片</el-button>
        </div>
      </div>
      <div class="table" v-if="tableDataV.data.length>0">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item,idx) in tableDataV.columns" :key="'h'+idx">
            {{item.title}}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.isDefault?'color':''"
          v-for="(item,index) in tableDataV.data" :key="'b'+index" @click="selectDataVideo(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked?'isChecked':''"></div>
          <div class="item">{{index+1}}</div>
          <el-tooltip class="item" effect="dark" :content="item.mediaCode" placement="top">
            <div class="item">{{item.mediaCode}}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
            <div class="item">{{item.title}}</div>
          </el-tooltip>
        </div>
      </div>
      <div v-if="tableDataV.data.length<=0"
        style="height:60px;display:flex;color:rgb(205, 205, 205);justify-content:center;align-items:center;">
        暂未配置影片
      </div>
    </div>

    <!-- 海报配置 -->
    <div class="poster">
      <div class="nameList">
        <div class="name">已配置海报</div>
        <div class="list" v-if="!disabledType">
          <el-button v-if="positionInfo.type !='bannerVideo1'" type="text" @click="configData(true)" :disabled="isDisabled">设置显示</el-button>
          <el-button type="text" style="color:red;" :disabled="JSON.stringify(this.selectItem)=='{}'?true:false" @click="deleteDataPoster">删除</el-button>
          <el-button type="text" @click="addPoster">新增海报</el-button>
        </div>
      </div>
      <!-- table -->
      <div class="table" v-if="tableDataP.data.length>0">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item,idx) in tableDataP.columns" :key="'h'+idx">
            {{item.title}}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.defaultImg?'color':''"
          v-for="(item,index) in tableDataP.data" :key="'b'+index" @click="selectDataPoster(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked?'isChecked':''"></div>
          <div class="item">{{item.imgSequence}}</div>
          <div class="item">{{item.imgName}}</div>
          <div class="item">{{item.imgType | formType}}</div>
        </div>
      </div>
      <!-- 图片预览 -->
      <div class="imgData" v-if="tableDataP.data.length>0 && preImgUrl !==''">
        <img :src="preImgUrl" alt="">
      </div>
      <div v-if="tableDataP.data.length<=0"
        style="height:60px;display:flex;color:rgb(205, 205, 205);justify-content:center;align-items:center;">
        暂未配置海报
      </div>
    </div>

    <!-- 新增影片弹窗 -->
    <Modal v-model="editModalVideo.show" :title="editModalVideo.title" :width="1200">
      <StaryeaLoading v-if="modalTable.loading"></StaryeaLoading>
      <div class="seachBox">
        <div class="boxFlex">
          <div class="items">
            <div class="title">影片CODE</div>
            <div class="cont">
              <el-input v-model="seachData.mediaCode" placeholder="请输入影片CODE" style="width:250px;" clearable>
              </el-input>
            </div>
          </div>
          <div class="items">
            <div class="title">影片名称</div>
            <div class="cont">
              <el-input v-model="seachData.title" placeholder="请输入影片名称" style="width:250px;" clearable>
              </el-input>
            </div>
          </div>
        </div>
        <div><Button type="primary" @click="queryVideoData(seachData)">查询</Button></div>
      </div>
      <div class="table_video">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item,idx) in modalTable.columns" :key="'h'+idx">
            {{item.title}}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.isChecked?'color':''"
          v-for="(item,index) in modalTable.data" :key="'b'+index" @click="selectVideo(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked?'isChecked':''"></div>
          <div class="item">{{item.mediaCode}}</div>
          <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
            <div class="item">{{item.title}}</div>
          </el-tooltip>
          <div class="item">{{item.metaId | formatVideoType}}</div>
          <div class="item">{{item.providerIds}}</div>
          <div class="item">{{item.cpName}}</div>
          <div class="item">{{item.createTime}}</div>
        </div>
      </div>
      <Page :total="modalTable.total" :current="modalTable.current" :page-size="modalTable.pageSize"
        @on-page-size-change="changePageSize" @on-change="changePage"
        show-elevator show-sizer show-total transfer
        style="text-align:right;margin-top: 20px;"/>
      <div slot="footer">
        <Button @click="handleCancleVideo">取消</Button>
        <Button type="primary" @click="handleOkVideo">确定</Button>
      </div>
    </Modal>
    
    <!-- 新增海报弹窗 -->
    <Modal v-model="editModalPoster.show" :title="editModalPoster.title" :width="500">
      <div class="postr_info">
        <div class="items">
          <div class="title"><span class="mark">*</span>海报上传</div>
          <div class="cont">
            <el-button type="text" @click="addImage()">本地上传</el-button>
            <el-upload ref="upload" :headers="headers" :action="uploadURL" :data="{adType:'301'}"
              style="display:none" :show-file-list="false"
              :before-upload="handleMaxSize" :on-success="handleSuccess">
            </el-upload>
            <el-button class="posterBtn" type="text" disabled>海报库选择</el-button>
          </div>
        </div>
        <div class="items">
          <div class="title">海报名称</div>
          <div class="cont">
            <el-input v-model="posterInfo.imgName" placeholder="请输入海报名称" disabled></el-input>
          </div>
        </div>
        <div class="items">
          <div class="title"><span class="mark">*</span>海报类型</div>
          <div class="cont">
            <el-select v-model="posterInfo.imgType" placeholder="请选择海报类型" style="width:100%" clearable>
              <el-option v-for="item in options" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="title"><span class="mark">*</span>海报排序</div>
          <div class="cont">
            <el-select v-model="posterInfo.imgSequence" placeholder="请选择海报排序" style="width:100%" clearable>
              <el-option v-for="item in imgType" :key="item.value"
                :label="item.label" :value="item.value">
                <span style="marginRight:5px;">{{item.value}}：</span>
                <span style="color:#8492a6;font-size:13px;">{{item.label}}</span>
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 图片展示 -->
        <div v-if="posterInfo&&posterInfo.imgUrl!=''" class="preview">
          <div class="name">图片名称：{{posterInfo.imgName}}</div>
          <div class="img">
            <img :src="posterInfo.imgUrl">
            <i @click="deleteImg" class="el-icon-error"></i>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="handleCanclePoster">取消</Button>
        <Button type="primary" @click="handleOkPoster">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "basicInfo",
  props: {
    siteId: {
      tyep: String,
      required: true,
    },
    disabledType:{
      type: Boolean,
      required: true,
    },
    positionInfo:{//海报位
      type: Object,
      required: true,
      default:() =>{}
    },
    floorComList:{//楼层组件列表
      type: Object,
      required: true,
      default:() =>{}
    }
  },
  data () {
    return {
      // 基础信息配置
      loading: false,
      handleType: sessionStorage.getItem("handleType"),
      siteCode:'',
      basicInfo:{},
      hanldType:"",
      hrefUrlList:[],//链接配置

      // 影片配置
      disabled: false,
      tableDataV: {//table
        columns: [
          { title:'',type:'index' },
          { title:'排序',key:'index' },
          { title:'影片code',key:'mediaCode' },
          { title:'影片名称',key:'title' },
        ],
        data: [],
        loading: false,
      },
      select: {},
      editModalVideo:{//新增弹窗
        show: false,
        title: '',
      },
      seachData: {},//弹窗查询
      modalTable: {//弹窗table
        columns:[
          { type:'',type:'index' },
          { title:'影片code',key:'mediaCode' },
          { title:'影片名称',key:'title' },
          { title:'影片类型',key:'metaId' },
          { title:'提供商ID',key:'providerIds' },
          { title:'内容提供商名称',key:'cpName' },
          { title:'上线时间',key:'createTime' },
        ],
        data:[],
        loading: false,
        total: 0,
        current: 1,
        pageSize: 10,
      },
      video: {},

      // 海报配置
      headers: {'Auth-Token': getToken()},
      uploadURL: "/iptv/epg/sichuan/categoryaudit/addPictures",
      options: [// 列表数据
        {value:0, label:'缩略图'},
        {value:1, label:'海报'},
        {value:2, label:'剧照'},
        {value:3, label:'图标'},
        {value:4, label:'标题图'},
        // {value:5, label:'广告图'},
        // {value:6, label:'草图'},
        {value:7, label:'背景图'},
        // {value:9, label:'频道图片'},
        // {value:10, label:'频道黑白图片'},
        // {value:11, label:'频道LOGO'},
        // {value:12, label:'频道名字图片'},
        {value:13, label:'海报角标'},
        {value:99, label:'其他'},
      ],
      imgType: [
        {value:240, label:'横图(中)'},
        {value:247, label:'竖图(中)'},
        {value:778, label:'横图(大)'},
        {value:999, label:'竖图(大)'},
      ],
      preImgUrl: '',
      selectItem: {},//选中设置默认的海报
      isDisabled: false,//设置显示按钮
      tableDataP: {//table
        columns: [
          { title:'',type:'index' },
          { title:'排序',key:'imgSequence' },
          { title:'海报名称',key:'imgName' },
          { title:'海报类型',key:'imgType' },
        ],
        data: [],
        loading: false
      },
      editModalPoster: {// 新增弹窗
        show: false,
        title: '',
      },
      posterInfo:{},
    }
  },
  watch: {
    siteId : {
      handler(){
        this.initQueryBasic();
        this.initQueryVideo();
        this.initQueryPoster();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /********************* 基础信息 *********************/
    initQueryBasic(){
      let params = { floorPageId:this.positionInfo.floorId, sitePageId:this.positionInfo.siteId, };
      this.loading = true;
      requestInfoConfig(params,'selecBasic').then(res =>{
        let {result_code, result_msg, data} = res;
        console.log("位置信息：",data);
        if(result_code == 0){
          this.loading = false;
          sessionStorage.setItem('basicInfo',JSON.stringify(data));
          if(data == 'null'){
            this.hanldType = "add";
            this.siteCode = "保存后自动生成"
            this.basicInfo = {
              floorPageId:'',
              sitePageId:'',
              categoryCode:'' ,
              categoryName:"",
              siteId:"",
              contentType: '1',
              description:"",
              sequence:"",
            }
            this.hrefUrlList = [
              {url:"",pre:"Z@U@",name:"中兴",sequence:1},
              {url:"",pre:"H@U@",name:"华为",sequence:2},
              {url:"",pre:"E@U@",name:"EPG3.0",sequence:3},
              {url:"",pre:"A@U@",name:"APK",sequence:4},
            ];
          } else {
            this.hanldType = "edit";
            this.siteCode = data.siteId;
            this.basicInfo = data;
            this.hrefUrlList = data.hrefInfo;
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 链接地址配置
    focusHrefUrl(item){
      this.$emit('hrefUrlModel',item,true);
    },
    // 保存：基本信息和链接地址
    submit(){
      let _this = this;
      // 更改海报标题
      this.floorComList.comList.forEach(item =>{
        item.value.forEach(ele =>{
          if(ele.title && (ele.siteId == this.positionInfo.siteId)){
            ele.title = this.basicInfo.categoryName;
          }
        })
      })
      //基本信息
      let params = {
        sitePageId: this.positionInfo.siteId,
        categoryName: this.basicInfo.categoryName,
        siteId: this.siteCode,
        contentType: '1',
        description: this.basicInfo.description,
        sequence: Number(this.positionInfo.index),
        floorPageId: this.positionInfo.floorId,
        flowId: this.positionInfo.flowId,
        modularJsonStr: JSON.stringify({
          comList: this.floorComList.comList,
          modelH: this.floorComList.modelH,
          titleBar: this.floorComList.titleBar
        })
      }
      // console.log('传给后端的参数：',params);
      // console.log('传给后端的参数：',JSON.parse(params.modularJsonStr));
      //链接地址
      let position = {sitePageId: this.positionInfo.siteId, hrefInfo: JSON.stringify(this.hrefUrlList)};
      if(params.categoryName == ''){
        this.$message({message:'您还有必填项未填，请检查！',type:'warning'});
      } else {
        // 轮播海报时添加轮播海报的标记type=bannerBar
        if(this.positionInfo.type == 'bannerBar'){params.type=this.positionInfo.type};
        console.log('保存位置信息：',params);
        if(this.hanldType == 'add'){
          requestInfoConfig(params,'insertBasic').then(res =>{//基本信息
            let {result_code, result_msg} = res;
            if(result_code == 0){
              requestInfoConfig(position,'savePositionLink').then(res =>{//链接地址
                let {result_code, result_msg} = res;
                if(result_code == 0){
                  this.$message({message:'保存成功',type:'success'});
                  _this.initQueryBasic();
                } else {
                  this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
                }
              })
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        } else if(this.hanldType == 'edit'){
          params.id = this.basicInfo.id;
          requestInfoConfig(params,'updateBasic').then(res =>{//基本信息
            let {result_code, result_msg} = res;
            if(result_code == 0){
              requestInfoConfig(position,'savePositionLink').then(res =>{//链接地址
                let {result_code, result_msg} = res;
                if(result_code == 0){
                  this.$message({message:'保存成功',type:'success'});
                  _this.initQueryBasic();
                } else {
                  this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
                }
              })
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        }
      }
    },

    /********************* 影片配置 *********************/
    // 初始化查询配置项
    initQueryVideo(){
      let params = { floorPageId:this.positionInfo.floorId, sitePageId:this.positionInfo.siteId};
      this.tableDataV.loading = true;
      requestInfoConfig(params,'selectPositionVod').then(res =>{
        let {result_code, result_msg,data} = res;
        console.log("影片信息：",data);
        if(result_code == 0){
          this.tableDataV.loading = false;
          if(data != 'null' && data.length>0){
            data.forEach(item =>{
              item.isChecked = false;
              this.select = {};
            });
            // 移动按钮控制
            if(data.length == 1){
              this.disabled = true;
            } else {
              this.disabled = false;
            }
            this.tableDataV.data = data;
            this.tableDataV.data[0].isDefault = true;
          } else {
            this.disabled = true;
            this.tableDataV.data = [];
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 选择已配置影片
    selectDataVideo(data){
      if(this.disabledType == true) return ;
      this.select = data;
      this.tableDataV.data.forEach(item =>{
        if(data.id == item.id){
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 置顶:top,置底:bottom,上移:moveUp,下移:moveDown
    updatePosition(type){
      if(JSON.stringify(this.select) == '{}'){
        this.$message({message:'请选择要移动的影片',type:'warning'});
      } else {
        let params = {
          mediaCode: this.select.mediaCode,
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
          type: type,
        }
        this.loading = true;
        requestInfoConfig(params,'updatePositionVod').then(res =>{
        let {result_code, result_msg} = res;
        if(result_code == 0){
          this.loading = false;
          this.initQueryVideo(this.positionInfo.siteId);
          this.$message({message: '移动成功',type:'success'});
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
      }
    },
    // 删除
    deleteDataVideo(){
      let _this = this;
      if(JSON.stringify(this.select) == '{}'){
        this.$message({message:'请选择要删除的影片',type:'warning'});
      } else {
        this.$Modal.confirm({
          title: '删除提醒',
          content: '确定删除该条内容？',
          loading: true,
          onOk: function () {
            let params = {
              mediaCode: _this.select.mediaCode,
              sitePageId: _this.positionInfo.siteId,
              floorPageId: _this.positionInfo.floorId,
            }
            requestInfoConfig(params,"deletePositionVod").then(res => {
              let {result_code, result_msg} = res;
              if(result_code == 0){
                this.$message({message:'删除成功',type:'success'});
                this.$Modal.remove();
                _this.select = {};
                _this.initQueryVideo(_this.positionInfo.siteId);
              } else {
                this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
              }
            })
          }
        })
      }
    },
    // 新增影片
    addVideo(){
      if(this.siteCode == '' || this.siteCode == '保存后自动生成'){
        this.$message({message:'请先填写位置信息并保存',type:'warning'});
      }
      else if(this.tableDataV.data.length==5){
        this.$message({message:'影片最多配置5个，若要新增请先删除',type:'warning'});
      } else {
        this.editModalVideo.show = true;
        this.editModalVideo.title = '选择影片';
        this.modalTable.data = []
        this.seachData = {
          mediaCode:'',
          title:'',
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
          start:0,
          length:10,
        };
        // this.queryVideoData();
      }
    },
    // 查询影片库
    queryVideoData(param){
      let _this = this;
     if (typeof param === 'object') { Object.assign(this.modalTable, param) };
      _this.seachData.start = (_this.modalTable.current - 1) * _this.modalTable.pageSize;
      _this.seachData.length = _this.modalTable.pageSize;
      _this.modalTable.loading = true;//加载状态
      requestInfoConfig( _this.seachData,'selectVodByPage').then(res =>{
        let {result_code, result_msg, data, recordsTotal} = res;
        if(result_code == 0){
          data.forEach(item =>{ item.isChecked = false;})
          _this.modalTable.loading = false;
          _this.modalTable.data = data;
          _this.modalTable.total = recordsTotal;
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 分页
    changePageSize(value) {
      // console.log("changePageSize",value);
      this.queryVideoData({
        pageSize: value,
        current: 1
      });
    },
    changePage(value) {
      // console.log("changePage",value);
      this.queryVideoData({
        current: value
      });
    },
    // 选择影片
    selectVideo(data){
      this.video = data;
      this.modalTable.data.forEach(item =>{
        if(data.id == item.id){
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 保存新增
    handleOkVideo(){
      if(JSON.stringify(this.video)=="{}"){
        this.$message({message:'请选择要添加的影片',type:'warning'});
      } else {
        let params = {
          mediaCode: this.video.mediaCode,
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
          description:"",
        }
        requestInfoConfig(params,'savePositionVod').then(res =>{
          let {result_code, result_msg} = res;
          if(result_code == 0){
            this.$message({message:'保存成功',type:'success'});
            this.initQueryVideo(this.positionInfo.siteId);
            this.editModalVideo.show = false;
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 关闭弹窗
    handleCancleVideo(){
      this.editModalVideo.show = false;
      this.video = {};
    },

    /********************* 海报配置 *********************/
    // 查询可配置的海报列表
    initQueryPoster(){
      let _this = this;
      let params = { floorPageId:this.positionInfo.floorId, sitePageId:this.positionInfo.siteId };
      this.tableDataP.loading = true;
      requestInfoConfig(params,'selectImg').then(res =>{
        let {result_code, result_msg,data} = res;
        console.log("海报信息：",data);
        if(result_code == 0){
          this.tableDataP.loading = false;
          if(data != 'null' && data.length>0){
            _this.isDisabled = false;
            _this.preImgUrl = "";
            // 设置第一条为默认海报
            if(data.length == 1 && data[0].defaultImg == false){
              _this.selectItem = data[0];
              _this.configData(false);
            } else {
              // 默认设置按钮及显示海报
              data.forEach(item =>{
                item.isChecked = false;
                _this.selectItem = {};
                if(item.defaultImg == true){
                  _this.preImgUrl = item.imgUrl;
                }
              })
              _this.tableDataP.data = data;
            }
          } else {
            _this.tableDataP.data = [];
            _this.isDisabled = true;
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 选择海报
    selectDataPoster(data){
      if(this.disabledType == true) return ;
      this.isDisabled = data.defaultImg;
      this.preImgUrl = data.imgUrl;
      this.selectItem = data;
      this.tableDataP.data.forEach(item =>{
        if(data.id == item.id){
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 设置海报
    configData(isDefaultImg){
      let _this = this;
      if(JSON.stringify(this.selectItem) == '{}'){
        this.$message({message:'请选择要设置的海报',type:'warning'});
      } else {
        this.floorComList.comList.forEach(item =>{
          item.value.forEach(ele =>{
            if(ele.siteId == this.positionInfo.siteId){
              ele.name = this.selectItem.imgName;
              ele.url = this.selectItem.imgUrl;
            }
          })
        })
        let params = {
          floorPageId: this.positionInfo.floorId,
          sitePageId: this.positionInfo.siteId,
          imgSequence:this.selectItem.imgSequence,
          imgType: this.selectItem.imgType,
          modularJsonStr: JSON.stringify({
            comList: this.floorComList.comList,
            modelH: this.floorComList.modelH,
            titleBar: this.floorComList.titleBar
          })
        }
        requestInfoConfig(params,'setDefaultImg').then(res =>{
          let {result_code, result_msg} = res;
          if(result_code == 0){
            if(isDefaultImg == true){
              this.$message({message:'设置成功',type:'success'});
            }
            _this.preImgUrl = "";
            _this.selectItem = {};
            _this.initQueryPoster();
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 删除
    deleteDataPoster(){
      let _this = this;
      let modularJsonStr = "";
      if(JSON.stringify(this.selectItem) == '{}'){
        this.$message({message:'请选择要删除的海报',type:'warning'});
      } else {
        this.$Modal.confirm({
          title: '删除提醒',
          content: '确定删除该条内容？',
          loading: true,
          onOk: function () {
            if(_this.selectItem.defaultImg == true){
              _this.floorComList.comList.forEach(item =>{
                item.value.forEach(ele =>{
                  if(ele.siteId == _this.positionInfo.siteId){
                    ele.name = "";
                    ele.url = "";
                  }
                })
              })
              modularJsonStr = JSON.stringify({
                comList: _this.floorComList.comList,
                modelH: _this.floorComList.modelH,
                titleBar: _this.floorComList.titleBar
              })
            } else {
              modularJsonStr = "";
            }
            let params = {
              id: _this.selectItem.id,
              floorPageId: _this.positionInfo.floorId,
              sitePageId: _this.positionInfo.siteId,
              imgId: _this.selectItem.imgId,
              defaultImg: _this.selectItem.defaultImg,
              modularJsonStr: modularJsonStr
            }
            requestInfoConfig(params,"deleteImg").then(res => {
              let {result_code, result_msg} = res;
              if(result_code == 0){
                this.$message({message:'删除成功',type:'success'});
                this.$Modal.remove();
                _this.preImgUrl = "";
                _this.selectItem = {};
                _this.initQueryPoster();
              } else {
                this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
              }
            })
          }
        })
      }
    },
    // 新增海报
    addPoster(){
      if(this.siteCode == '' || this.siteCode == '保存后自动生成'){
        this.$message({ message:'请先填写位置信息并保存', type:'warning' });
      } else if(this.positionInfo.type == 'videoBar'){
        this.$Modal.warning({ title: '提示', content: '视频框不支持配置海报' });
      } else if(this.positionInfo.type == 'bannerVideo1'){
        this.$Modal.warning({ title: '提示', content: '轮播影片不支持配置海报' });
      } else {
        this.editModalPoster.show = true;
        this.editModalPoster.title = '新增海报';
        this.posterInfo = {
          imgName:'',
          imgUrl:'',
          imgType:null,
          imgSequence: null,
          sequence:'',
          detail:'',
          imgSource:1,
          linkType:3,
          version:1,
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
        }
      }
    },
    // 上传图片
    addImage(){
      this.$refs['upload'].$children[0].$refs.input.click();
    },
    // 大小格式校验
    handleMaxSize(file){
      let typeParams = ['jpg','jpeg','png'];
      if(typeParams.indexOf(file.type.split('/')[1]) == -1){
        this.$Message.error("请上传图片格式jpg,jpeg,png")
      } else if((file.size / (1024 * 1024)) >= 1) {
        this.$Message.error("请上传小于1M的图片")
      }
    },
    // 上传成功
    handleSuccess(res, file){
      let imgUrl = res.data.fileByteUrl;
      this.posterInfo.imgName = file.name;
      this.posterInfo.imgUrl = imgUrl;
    },
    // 删除图片
    deleteImg(){
      this.posterInfo.imgName = "";
      this.posterInfo.imgUrl = "";
    },
    // 保存新增
    handleOkPoster(){
      this.posterInfo.sequence = this.posterInfo.imgSequence;
      if(this.posterInfo.imgType==null || this.posterInfo.imgSequence==null ||
        this.posterInfo.imgUrl==''){
        this.$message({message:'您还有必填项未填，请检查！',type:'warning'});
      } else {
        requestInfoConfig(this.posterInfo,'insertImg').then(res =>{
          let {result_code, result_msg} = res;
          if(result_code == 0){
            this.$message({message:'保存成功',type:'success'});
            this.initQueryPoster();
            this.editModalPoster.show = false;
            this.posterInfo = {};
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 关闭弹窗
    handleCanclePoster(){
      this.editModalPoster.show = false;
      this.posterInfo = {};
    },
  },
  filters: {
    // 海报类型翻译
    formType(val){
      if(val == 0){
        return '缩略图'
      } else if(val == 1){
        return '海报'
      } else if(val == 2){
        return '剧照'
      } else if(val == 3){
        return '图标'
      } else if(val == 4){
        return '标题图'
      } else if(val == 7){
        return '背景图'
      } else if(val == 13){
        return '海报角标'
      } else if(val == 99){
        return '其他'
      }
    },
    // 影片类型
    formatVideoType(val){
      if(val == 0){
        return '电影'
      } else if(val == 1){
        return '电视剧'
      } 
    }
  }
}
</script>

<style lang="less" scoped>
.basicInfo {
  margin: 15px 20px;
  .nameList{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0px;
    .name{
      font-weight: bold;
    }
  }
  .info{
    .items{
      width: 100%;
      margin: 8px 0px;
      display: flex;
      align-items: center;
      .title{
        position: relative;
        width: 60px;
        margin-right: 10px;
        text-align: right;
        color: #CFCFD2;
        .mark{
          font-family: SimSun;
          font-size: 14px;
          color: #ed4014;
          position: absolute;
          left: -8px;
        }
      }
      .cont{
        width: calc(100% - 70px);
        display: flex;
        align-items: center;
      }
    }
  }
  .table{
    .colums{
      background-color: #F0F2F5;
      padding: 0px !important;
      .colItem{
        margin: 8px 0;
        width: 60%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:nth-child(1){
          margin: 8px 10px;
          width: 15px;
          height: 15px;
        }
        &:nth-child(2){
          width: 35px;
        }
        &:nth-child(4){
          width: 125px;
        }
      }
    }
    .colums, .dataBox{
      display: flex;
      align-items: center;
      justify-content: space-around;
      border: 1px solid #e8eaec;
      border-bottom: none;
    }
    .dataBox{
      &:nth-last-child(1){
        border: 1px solid #e8eaec;
      }
      .item{
        margin: 13px 0;
        width: 60%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:nth-child(2){
          width: 35px;
        }
        &:nth-child(4){
          width: 125px;
        }
      }
      .selcet{
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        margin: 10px;
        width: 15px;
        height: 15px;
        background-color: #fff;
        z-index: 1;
        transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
        &::after{
          box-sizing: content-box;
          content: "";
          border: 1px solid #fff;
          border-left: 0;
          border-top: 0;
          height: 7px;
          left: 4px;
          position: absolute;
          top: 1px;
          transform: rotate(45deg) scaleY(0);
          width: 3px;
          transition: transform .15s ease-in .05s;
          transform-origin: center;
        }

      }
      .isChecked {
        background-color: #409eff;
        border-color: #409eff;
        &::after{
          transform: rotate(45deg) scaleY(1);
        }
      }
    }
    .color{
      color: #409eff;
    }
  }
  .imgData{
    margin: 20px 15px;
    border: 2px dashed #8DBEFE;
    height: 255px;
    img{
      padding: 10px 40px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

<style lang="less" scoped>
// input
/deep/ .el-input__inner{
  padding: 0px 10px;
  height: 35px;
  line-height: 35px;
}
// 前缀 input
/deep/ .el-input-group__prepend{
  padding: 0 4px !important;
}
// textarea
/deep/ .el-textarea__inner{
  resize:none;
  padding: 5px 10px;
}
// 按钮
/deep/ .el-button.is-round{
  padding: 8px 12px;
  border-radius: 4px;
}
/deep/ .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
  color: #C0C4CC !important;
  cursor: not-allowed;
}
/deep/ .el-button--primary{
  background-color: #3089fd;
  border-color: #3089fd;
}
/deep/ .el-button--primary:focus, .el-button--primary:hover{
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;
}
/deep/ .el-button--primary.is-plain{
  color: #409EFF;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
/deep/ .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover{
  background: #409EFF;
  border-color: #409EFF;
  color: #FFF;
}



/*** 海报配置 ***/
// table
/deep/ .ivu-table-cell{
  padding: 0;
}
/deep/ .ivu-table th{
  background-color: #F0F2F5 !important;
  font-weight: normal;
}
// 新增弹窗
/deep/ .ivu-modal-body .postr_info{
  margin: 15px 20px;
  .items{
    width: 100%;
    margin: 8px 0px;
    display: flex;
    align-items: center;
    .title{
      position: relative;
      width: 60px;
      margin-right: 20px;
      text-align: right;
      color: #CFCFD2;
      .mark{
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
        position: absolute;
        left: -8px;
      }
    }
    .cont{
      width: calc(100% - 70px);
      display: flex;
      align-items: center;
      .posterBtn{
        margin-left: 30px;
      }
    }
  }
  .preview{
    margin-left: 80px;
    margin-bottom: 10px;
    .name{
      margin-bottom: 5px;
    }
    .img{
      position: relative;
      width: 200px;
      height: 120px;
      img{
        width: 100%;
        height: 100%;
      }
      &:hover{
        cursor: pointer;
        .el-icon-error{
          display: block;
        }
      }
    }
    .el-icon-error{
      position: absolute;
      right: 0;
      top: 0;
      display: none;
      color: red;
      font-size: 25px;
      cursor: pointer;
      z-index: 9999;
    }
  }
}


/*** 影片配置 ***/
// 搜索
/deep/ .ivu-modal-body .seachBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 40px;
  .boxFlex{
    display: flex;
    align-items: center;
    .items{
      display: flex;
      align-items: center;
      &:nth-child(2){
        margin: 0 15px;
      }
      .title{
        width: 70px;
        text-align: right;
        margin-right: 10px;
      }
    }
  }
}
// 表格
/deep/ .ivu-modal-body .table_video{
  .colums{
    background-color: #F0F2F5;
    padding: 0px !important;
    .colItem{
      padding: 8px 0;
      width: 200px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-right: 1px dashed #cdcdcd;
      &:nth-child(1){
        border-right: none;
        margin-right: 0;
        margin: 8px 10px;
        width: 15px;
        height: 15px;
      }
      &:nth-child(2){
        width: 300px;
      }
      &:nth-child(4){
        width: 120px;
      }
      &:nth-child(5){
        width: 140px;
      }
      &:nth-last-child(1){
        border-right: none;
        margin-right: 0;
      }
    }
  }
  .colums, .dataBox{
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #e8eaec;
    border-bottom: none;
  }
  .dataBox{
    &:nth-last-child(1){
      border: 1px solid #e8eaec;
    }
    .item{
      margin: 13px 0;
      width: 200px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:nth-child(2){
        width: 300px;
      }
      &:nth-child(4){
        width: 120px;
      }
      &:nth-child(5){
        width: 140px;
      }
    }
    .selcet{
      display: inline-block;
      position: relative;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      box-sizing: border-box;
      margin: 10px;
      width: 15px;
      height: 15px;
      background-color: #fff;
      z-index: 1;
      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
      &::after{
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
    }
    .isChecked {
      background-color: #409eff;
      border-color: #409eff;
      &::after{
        transform: rotate(45deg) scaleY(1);
      }
    }
  }
  .color{
    color: #409eff;
  }
}

</style>
